<div data-controller="new-project" data-new-project-providers-value="<%= selectable_providers.to_json %>">
  <%= form_with(model: project, data: { turbo: false }) do |form| %>
    <h2 class="text-2xl font-bold">Create a new project from Git repository</h2>
    <%= link_to(
      "Deploy from Container Registry instead →",
      new_project_path(provider_type: Provider::REGISTRY_TYPE),
      class: "inline-block mt-2 underline underline-offset-4 text-blue-300 hover:text-blue-200 text-sm",
    ) %>
    <hr class="mt-3 mb-4 border-t border-base-300" />

    <%= render "shared/error_messages", resource: form.object %>

    <div class="space-y-8">
      <%= render(FormFieldComponent.new(
        label: "Name",
        description: "A unique name for your project, only lowercase letters, numbers, and hyphens are allowed."
      )) do %>
        <%= form.text_field :name, class: "input input-bordered w-full focus:outline-offset-0", autofocus: true, required: true %>
        <label class="label">
          <span class="label-text-alt">* Required</span>
        </label>
      <% end %>

      <%= render(FormFieldComponent.new(
        label: "Cluster",
        description: "The cluster to deploy your project to."
      )) do %>
        <%= form.collection_select :cluster_id, current_account.clusters.running, :id, :name, {}, { class: "select select-bordered w-full" } %>
        <label class="label">
          <span class="label-text-alt">* Required</span>
        </label>
      <% end %>

      <%= render(FormFieldComponent.new(
        label: "Git Credentials",
        description: "The credentials to use to connect to your Git repository"
      )) do %>
        <%= render "projects/create/select_credentials", form:, selectable_providers: %>

        <div data-new-project-target="gitRepository" class="hidden">
          <div class="form-control mt-1 w-full max-w-sm">
            <div data-controller="github-select-repository">
              <label class="label">
                <span class="label-text"><span data-new-project-target="gitProviderLabel">Github</span> Repository</span>
              </label>

              <%= form.text_field(
                :repository_url,
                class: "input input-bordered w-full focus:outline-offset-0",
                placeholder: "accountname/repo",
                data: {
                  "github-select-repository-target": "repository",
                }
              ) %>
              <div class="flex justify-between mt-2">
                <label class="label">
                  <span class="label-text-alt">* Required</span>
                </label>
                <button
                  class="btn btn-sm btn-outline"
                  type="button"
                  data-action="github-select-repository#connectToGithub"
                  data-github-select-repository-target="button"
                  data-disable-with="Loading..."
                  data-new-project-target="githubConnectButton"
                >
                  Connect with Github <iconify-icon icon="mdi:github" width="24" height="24"></iconify-icon>
                </button>
              </div>
              <%= render "integrations/github/repositories/modal" %>
            </div>
          </div>

          <div class="form-control mt-1 w-full max-w-sm">
            <label class="label">
              <span class="label-text">Branch</span>
            </label>
            <%= form.text_field :branch, class: "input input-bordered w-full focus:outline-offset-0" %>
            <label class="label">
              <span class="label-text-alt">* Required</span>
            </label>
          </div>
        </div>
      <% end %>

      <%= render(FormFieldComponent.new(
        label: "Autodeploy",
        description: "Automatically deploy the project when the branch is pushed to."
      )) do %>
        <%= form.check_box :autodeploy, class: "checkbox" %>
      <% end %>

      <%= render(FormFieldComponent.new(
        label: "Predeploy command",
        description: "The command to run before deploying the project. This is useful for running migrations or other setup commands."
      )) do %>
        <%= form.text_field :predeploy_command, class: "input input-bordered w-full focus:outline-offset-0" %>
      <% end %>

      <% if Flipper.enabled?(:build_configuration, current_account) %>
        <%= render(FormFieldComponent.new(
          label: "Build settings",
          description: "Configure where your container images will be built. You can use Kubernetes-based build clouds for faster, scalable builds, or use local Docker for simpler setups."
        )) do %>
          <%= render "projects/build_configurations/form", form: form, project: project %>
        <% end %>
      <% end %>

      <%= render "shared/partials/namespace_input_group", form: %>
    </div>

    <div class="form-footer">
      <%= form.button "Submit", class: "btn btn-primary" %>

      <% if form.object.new_record? %>
        <%= link_to t("cancel"), projects_path, class: "btn btn-secondary", data: { turbo: false } %>
      <% else %>
        <%= link_to t("cancel"), project_path(@project), class: "btn btn-secondary" %>
      <% end %>
    </div>
  <% end %>
</div>
